<template>
    <div class="wrop flex fdc fg1">
        <h1 class="mb-30">categories</h1>
        <div class="wrop-content flex ">
            <div class="wrop-content-left fg1 flex fdc">
                <h4 class="mb-10">Add New Category</h4>
                <el-form 
                :model="form" 
                label-width="120px" 
                :size="size"
                :label-position="labelPosition">
                    <el-form-item  label="name">
                        <div class="flex fg1 fdc">
                            <el-input v-model="form.Name" />
                            <p class="tishi">The name is how it appears on your site.</p>
                        </div>
                    </el-form-item>
                    <el-form-item label="Slug">
                        <div class="flex fg1 fdc">
                            <el-input v-model="form.SiteAddress" />
                            <p class="tishi">The “slug” is the URL-friendly version of the name. It is usually all lowercase and contains only letters, numbers, and hyphens.</p>
                        </div>
                    </el-form-item>
                    <el-form-item label="Parent Category">
                        <el-select v-model="form.ParentCategory" placeholder="None">
                            <el-option label="父类1" value="e1" />
                            <el-option label="父类2" value="e2" />
                            <el-option label="父类3" value="e3" />
                        </el-select>
                        <div class="flex fg1 fdc">
                        <p class="tishi">
                            Categories, unlike tags, can have a hierarchy. You might have a Jazz category, and under that have children categories for Bebop and Big Band. Totally optional.
                        </p>
                    </div>
                    </el-form-item>
                    <el-form-item label="Description">
                        
                        <div class="flex fg1 fdc">
                            <el-input v-model="form.Description" type="textarea" />
                            <p class="tishi">The description is not prominent by default; however, some themes may show it.</p>
                        </div>
                    </el-form-item>
                    <el-button class="mb-30" type="primary" @click="onSubmit">Add New Categoy</el-button>
                </el-form>
            </div>
            <div class="wrop-content-right pr-15">
                <el-table :data="tableDatas" style="width: 100%">
                    <el-table-column fixed prop="Name" label="Name" width="150" />
                    <el-table-column prop="Description" label="Description" width="120" />
                    <el-table-column prop="Slug" label="Slug" width="120" />
                    <el-table-column prop="Conut" label="Conut" width="120" />
                    <el-table-column fixed="right" label="Operations" width="120">
                    <template #default>
                        <el-button link type="primary" size="small" @click="handleClick"
                        >Detail</el-button
                        >
                        <el-button link type="primary" size="small">Edit</el-button>
                    </template>
                    </el-table-column>
                </el-table>
                
            </div>
        </div>
    </div>
</template>

<script setup>
import { reactive,computed, ref} from 'vue'

const labelPosition = ref('top')
const size = ref('large')
const form = reactive({
    Name: '',
    Tagline: '',
    ParentCategory: '',
    SiteAddress: '',
    Description: '',
})

const onSubmit = () => {
    console.log('submit!')
}

const handleClick = () => {
    console.log('click')
}

const search = ref('')

// 表格数据
const tableDatas =[]
for(let i=0;i<5;i++) {
    tableDatas.push(
        {
            Name: 'add',
            Description: '—',
            Slug: 'weintek',
            Conut:'6'
        }
    )
}
console.log(tableDatas,'tableDatas');

</script>

<style lang="less" scoped>

.wrop{
    background: #f1f1f1;
        &-content{
            overflow:auto;
            &-left{
                width: 0px;
                & > h4 {
                    padding: 10px;
                }
                //表单
                .el-form{
                    &-item{
                        padding: 0px 10px 10px 10px;
                            ::v-deep .el-form-item__label{
                                font-weight: bold;
                                color: black;
                                font-size: 15px;
                            }
                            .tishi{
                                font-style:italic;
                                color: rgb(161, 159, 159);
                            }
                            &__content{
                                .el-input--large{
                                    ::v-deep  {
                                        // width: 70%;
                                    } 
                                }
                            }
                            ::v-deep .el-form-item__label{
                                width: 220px !important;
                            }
                    }
                }
            }
            &-right{
                flex-grow: 2;
                height: 100%;
                width: 0px;
                // overflow: auto;
            }
        } 
    
}
::v-deep .el-form-item {
    margin: 0px !important ;
}
::v-deep .el-textarea > .el-textarea__inner{
    // width: 300px;
}
// 滚动条
.wrop-content::-webkit-scrollbar {
    /* 对应纵向滚动条的宽度 */
    width: 5px;
    /* 对应横向滚动条的宽度 */
    height: 10px;
}

    /* 滚动条上的滚动滑块 */
.wrop-content::-webkit-scrollbar-thumb {
        background-color: #cdcecf;
        border-radius: 32px;
}
// 滚动条end
</style>